<template>
	<view class="containt">
		<view style="width: 750rpx;height: 754rpx;position: relative;">
			<swiper style="width: 100%; height: 100%;" :indicator-dots="false" :autoplay="false" class="swiper" :current="currentNum" ref="swiper" @change="(e)=>{handleImg(e.detail.current)}">
				<swiper-item style="width: 100%; height: 100%;" v-for="(item,index) in list1" :key="index">
					<image :src="`${baseimgURL}${item}`" style="width: 100%; height: 100%;" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view style="position: absolute;right: 22rpx; bottom: 22rpx; background: rgba(0,0,0,0.5);color: #FFFFFF;font-size: 24rpx;padding: 4rpx 10rpx;">
				{{currentNum+1}}/{{list1.length}}
			</view>
		</view>
		<view class="scrollbox">
			<scroll-view scroll-x="true" class="scroll">
				<image v-for="(item,index) in list1" :src="`${baseimgURL}${item}`" class="scrollimg" :class="currentNum === index?'sel':''" @click="handleImg(index)" mode="aspectFill" ></image>
			</scroll-view>
		</view>
		<view class="content">
			<view class="title">{{detail.brandIdName}}</view>
			<view v-if="detail.description" class="desc">{{detail.description}}</view>
			<view class="flex price" v-if="detail.entityPrice !== '0'">
				<view class="">鉴定价:</view>
				<view class=""><span class="span">￥</span>{{detail.entityPrice}}</view>
			</view>
			<view class="flex price" v-else-if="detail.futurePrice">
				<view class="">预估价:</view>
				<view class=""><span class="span">￥</span>{{detail.futurePrice}}</view>
			</view>
			<view style="width: 705rpx;height: 0rpx;border: 2rpx solid #F4F4F4;"></view>
			<view class="bottcontent">
				<view v-if="detail.orderDeliveryInfo">
					<view class="botttitle">出售预约</view>
					<!-- <view class="bottom-item">
						<view class="text">预约方式:</view>
						<text>{{ detail.xx }}</text>
					</view> -->
					<view class="bottom-item">
						<view class="text">预约地址:</view>
						<text>{{ detail.orderDeliveryInfo.province }}{{ detail.orderDeliveryInfo.city }}{{ detail.orderDeliveryInfo.area }}{{detail.orderDeliveryInfo.detailAddress}}</text>
					</view>
					<view class="bottom-item">
						<view class="text">联系人:</view>
						<text>{{detail.orderDeliveryInfo.consigneeName}}</text>
					</view>
					<view class="bottom-item">
						<view class="text">联系电话:</view>
						<text>{{detail.orderDeliveryInfo.consigneeMobile}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottomview flex">
			<button class="smallBtn" open-type="contact">
				<image src="@/static/img/custom.png" style="width:30rpx;height:30rpx;right: 6rpx;" align="center"></image>
			  <view class="btntext">联系客服</view>
			</button>
			<view class="lastbtn" @tap="handleSale">我要出售</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, ref } from "vue"
	import { onLoad } from "@dcloudio/uni-app"
	import { fetchOrderDetail } from '@/api/order'
	import { baseimgURL } from '@/config'

	onLoad(options => {
		getDetail(options.id)
	})

	const currentNum = ref(0);
	const detail = ref({})
	const list1 = ref([])

	const handleImg = (index) => {
	  currentNum.value = index
	}

	const handleSale = () => {
		uni.showToast({
			title: '请联系客服',
			icon: 'none',
			mask: true
		})
	}

	const getDetail = async (id) => {
		try {
			const { data } = await fetchOrderDetail({id: id})
			detail.value = data
			list1.value = data.productPicture.split(',')
		} catch(err) {
			console.error(err)
		}
	}
</script>

<style lang="scss" scoped>
	/* 轮播指示器 */
	.indicator-num {
	  padding: 4rpx 0;
	  background-color: rgba(0, 0, 0, 0.35);
	  border-radius: 4rpx;
	  width: 49rpx;
	  @include flex;
	  justify-content: center;

	  &__text {
			color: #ffffff;
			font-size: 22rpx;
	  }
	}
	.scrollbox{
		padding: 30rpx 22rpx;
	}
	.scroll{
		white-space: nowrap;
	}
	.scrollimg{
		width: 94rpx;
		height: 94rpx;
		border-radius: 7rpx;
		margin-right: 14rpx;
		border: 2rpx solid transparent;
	}
	.sel{
	  border: 2rpx solid #953B82;
	}
	.title{
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #060C3C;
		margin-bottom: 22rpx;
	}
	.desc {
		font-size: 20rpx;
		font-family: PingFangSC, PingFang SC;
		margin-bottom: 22rpx;
	}
	.content{
		padding: 0 22rpx;
	}
	.price{
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 36rpx;
		margin-bottom: 16rpx;
		:nth-child(2){
			font-size: 36rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FE395E;
			line-height: 36rpx;
			margin-left: 8rpx;
		}
		.span{
			font-size: 25rpx;
		}
	}
	.bottcontent{
		.botttitle{
			height: 36rpx;
			font-size: 25rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 36rpx;
			margin-bottom: 14rpx;
			margin-top: 22rpx;
		}
		.bottom-item {
			height: 36rpx;
			line-height: 36rpx;
			display: flex;
			font-size: 25rpx;
			font-weight: 400;
			color: #333333;

			.text {
				font-size: 25rpx;
				font-weight: 400;
				color: #666666;
				width: 104rpx;
				text-align: left;
				margin-right: 10rpx;
			}
		}
	}
	.tipsinfo{
		padding: 20rpx 36rpx;
		background: #F9F9F9;
		border-radius: 7rpx;
	}
	.bottomview{
		position: fixed;
		left: 0;
		bottom: 0rpx;
		width: 100%;
		background: #fff;
		padding: 10rpx 22rpx 16rpx;
		box-sizing: border-box;
		.lastbtn{
			width: 547rpx;
			height: 91rpx;
			background: #953B82;
			border-radius: 7rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 27rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	.smallBtn{
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333854;
		line-height: 33rpx;
		padding: 0;
		background: #fff;
		.btntext{
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333854;
			margin-top: 8rpx;
		}
	}
	.smallBtn::after{ border: none;}
</style>
